Visual Studio CodeによるNode.jsのデバッグ（その１）

#Node.js

#VSCode（Visual Studio Code）

SIN

2016.03.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

約１年前、アルファ版として登場した、Visual Studio Code（以下VS Code）ですが、昨年１１月には、ベータ版となり、またオープンソースとしてコードも公開されました。

公開以来、毎月のように更新・強化されており、使用方法も微妙に変化して来ていますので、今回、改めて基本的な使用方法をまとめてみました。

本記事は、VS Codeがインストールされており、下記のコマンドで、起動できるようになっている事を前提に始めます。

$ code .

もし、まだ、インストールされていない場合は、下記をご参照ください。
Setting up Visual Studio Code

また、Node.jsについてもインストールが完了しているものとします。

$ node -v
v5.9.0

2 簡単なサーバープログラムの作成

(1) プロジェクトの作成

プロジェクト名をSampleAppとして、ディレクトリを作成し、その中にserver.jsという名前のファイルを作成します。

$ mkdir SampleApp
$ cd SampleApp
$ touch server.js

続いて、プロジェクトのディレクトリの中で、VS Codeを起動します。

$ code .

VS Codeは、カレントディレクトリをプロジェクトのトップと認識して、その中のファイルを展開します。現在は、server.jsだけが表示されています。

003

(2) 基本型のインテリセンス

VS Codeは、拡張子で編集中のコードが何であるかを認識します。server.jsを開くと、右下にJavaScriptと表示されます。

005

編集中のコードが、JavaScriptであることを認識しているため、JavaScriptの基本型についてはインテリセンスが既に使用可能になっています。

次のように、文字列で初期化した変数strが、String型であると認識され、利用可能なプロパティやメソッドが表示されていることを確認できます。

006

(3) 参照のインテリセンス

次の図を見ると、require()で読み込んだ外部ライブラリは、型を認識出来ていないことが分かります。

004

これに対応するには、まず、プロジェクトのトップにjsconfig.jsonというファイルを作成します。

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs"
    }
}

015

jsconfig.jsonは、VS Codeに対してJavaScriptについての追加情報を提供します。

上の定義では、ECMAScriptのバージョンをES６、外部モジュールのコンパイル形式をcommonjsに設定しています。モジュールにnpmを使用する場合は、commonjsになります。

続いて、外部モジュールの型情報をTypeScript Definition Filesで取得します。これは、TypeScriptで型定義されたファイルを、パッケージ単位で用意して、それを参照する仕組みです。

まずは、グローバルにtypingsをインストールします。（既にtypingsがインストールされている場合は必要ありません）

$ npm install -g typings

続いて、nodeパッケージの型情報をプロジェクトに配置します。型情報はリポジトリに登録されており、そこから取得して、プロジェクト内にコピーしています。

$ typings install node --ambient

リポジトリから取得したファイルは、typeingsの下に置かれます。

008

この時点で、外部ライブラリの型も解決できて、インテリセンスが効いているのが分かります。 009

(3) 簡単なサーバプログラム

それでは、インテリセンスを便利に使用しながら、簡単なサーバプログラムを作成してみます。

server.jsを開いて、下記をコード記述します。

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000);

console.log('Server running at http://localhost:3000/');

コマンドラインから実行すると、ブラウザでアクセスできることが確認できます。

$ node server.js 
Server running at http://localhost:3000/

010

Control+Cでプログラムは終了します。

3 デバッグ実行

左の虫のアイコンをクリックして表示された緑の三角形を押すと、何で実行するかの選択が表示されますので、ここでNode.jsを選択します。

011

すると、新しく、.vscodeというフォルダが作成され、その中にlaunch.jsonというファイルが生成されます。このファイルは、VS Codeが、このプロジェクトを実行するための設定ファイルとなります。

この設定ファイルで、configuration - program の部分が、"${workspaceRoot}/app.js" となっています。

これが、プログラムのエントリーポイントとして実行されるファイル名なのですが、自動生成された場合、ここが、app.jsとなってしまいます。今回キックするファイルは、 server.js ですので、ここを "${workspaceRoot}/server.js" に書き換えます。 012